<template>
  <div class="app-container">
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <router-view />
    </div>
    
    <!-- 底部导航（固定在底部） -->
    <van-tabbar 
      v-model="active" 
      route 
      :placeholder="true"
      class="bottom-tabbar"
    >
      <van-tabbar-item to="/myhome/recommend" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/course" :badge="badge" icon="comment-o">课堂</van-tabbar-item>
      <van-tabbar-item to="/post" icon="apps-o">添加</van-tabbar-item>
      <van-tabbar-item to="/favorite" icon="contact-o">收藏</van-tabbar-item>
      <van-tabbar-item to="/profile" icon="contact-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref,onMounted, onUnmounted } from "vue";
import { showToast } from 'vant'; // 确保导入vant组件
import { connectWebSocket } from '@/util/socket.js';
const badge = ref(5);
const active = ref(0);

// 搜索框相关（确保showToast已导入）
const value = ref('');
const onSearch = (val) => showToast(val);
const onCancel = () => showToast('取消');
</script>

<style scoped>
.app-container {
  /* 确保容器占满屏幕高度 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 防止内容被底部导航遮挡 */
  padding-bottom: var(--tabbar-height, 50px);
  box-sizing: border-box;
}

.content-wrapper {
  /* 内容区域自动填充剩余空间 */
  flex: 1;
  overflow-y: auto;
}

.bottom-tabbar {
  /* 固定在底部 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 提高层级，防止被内容覆盖 */
  z-index: 100;
  /* 解决某些情况下的边框问题 */
  border-top: 1px solid #eee;
}
</style>